<template>
    <section id='login'>
				<header><img src="./img/denglu.png" ></header>
				<main class="container">
					<ul>
						<li><label for="user">用户名/邮箱</label><input type="text" v-model="username" placeholder="请输入用户名或邮箱" id="user"></li>
						<li><label for="psw">密码</label><input type="text" v-model="password" placeholder="请输入密码" id="psw"></li>
					</ul>
				</main>
				<footer class="container">
					<button><a @click="reg()">注册</a></button>
					<button><a @click="onLogin()">登录</a></button>
				</footer>
		</section>
</template>


<style scoped>
*{
	margin: 0;
	padding: 0;
}
body {
	min-width: 320px;
	max-width: 750px;
	/* flexible 给我们划分了 10 等份 */
	width: 10rem;
	/* width: 100%; */
	margin: 0 auto;
	line-height: 1.5;
	font-family: Arial, Helvetica;
	height: 100%;
}
a{
	text-decoration: none;
	display: inline-block;
	color: white;
}
ul li{
	list-style: none;
}
@media screen and (min-width: 750px) {
	html {
		font-size: 75px !important;
	}
}
.container{
	margin: 0 0.506666rem;
	
}
#login{
	width: 100%;
	background: url(./img/beijing.png) no-repeat;
	background-size: 100% 100%;
}
header{
	height: 6.866666rem;
	/* background-color: red; */
}
header img{
	width: 100%;
}
main{
	height: 5.44rem;
	background-color: white;
	border-radius: 0.2rem;
	overflow: hidden;
}
main ul{
	
	/* background-color: green; */
	margin-left: 1rem;
	margin-right: 1rem;
	margin-top: 1.333333rem;
}
main ul li{
	display: flex;
	flex-direction: column;

}
main ul li:first-child{

	margin-bottom: 0.266666rem;
}
main ul li:last-child{
	border-top: 1px solid #ddd;
	padding-top: 0.533333rem;
}
main ul li label{
	color: #b0b0b0;
	font-size: 0.32rem;
	/* margin-bottom: 0.2rem; */
}
main ul li input{
	height:0.8rem;
	border: none;
	outline: none;
	color: #3a3a3a;
	font-size: 0.426666rem;
}
footer{
	height:5.466666rem;
	padding-top: 2.666666rem;
	box-sizing: border-box;
/* 	background-color: blue; */
	display: flex;
	justify-content: space-between;
}
footer button{
	width: 45%;
}
footer button:first-child{
	/* background-color:white; */
	height: 1.173333rem;
	border-radius: 0.5rem;
	font-size: 0.44rem;
	color: #626262;
	border: none;
	outline: none;
}
footer button:last-child{
	background-color:#ff9726;
	border-radius: 0.5rem;
	height: 1.173333rem;
	font-size: 0.44rem;
	border: none;
	outline: none;
}
footer button:first-child a{
	color: #626262!important;
}



</style>

<script setup>
import { ref,reactive,onMounted} from 'vue'
import { useRouter } from 'vue-router'
const router = useRouter()
const reg =()=>{
    router.push('/reg')
}

import axios from 'axios';
import request from "../../axios/request.js";
var username = ref('')
var password = ref('')
const users = reactive({
  list: [],
});
onMounted(()=>{
	localStorage.clear();
})
const onLogin = () => {
	request({
    url: "http://127.0.0.1:8081/users",
    method: "get",
  })
    .then((res) => {
      users.list = res.data;
	  for(var i =0 ;i<users.list.length;i++){
		if(username.value==users.list[i].username &&password.value==users.list[i].password){
			alert('登录成功！')
    		router.push('/index')
			localStorage.setItem(username.value, password.value)
			return 
		}
	  }
	  alert('用户名或密码输入错误')
      console.log(username.value)
      localStorage.removeItem('token')
    })
    .catch((error) => {
      console.log(error);
    });
}
onMounted(()=>{
	localStorage.clear();
})


</script>